<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>display</title>

		<style type="text/css">
			/**
			 * 将一个内元素变成块元素
			 * 通过display样式，可以修改元素类型
			 * 	可选值：
			 *		inline：可以将一个元素作为内联元素显示
			 *		block：可以将一个元素作为块元素显示
			 *		inline-block：可以将一个元素作为行内块元素显示，
								既有行内元素特点，又有块元素特点，既可以设置宽高，又不会独占一行
					none:不显示元素，并且元素不会再页面中继续占有位置
			 */
			a {
				width: 200px;
				height: 200px;
				background-color: #BBFFAA;

				display: inline-block;
			}
			
			.box{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				/**
				 * display:none
				 * 使用该凡是隐藏的元素，不会在页面中显示，且不再占据页面位置
				 */
				/* display: none; */
				
				/**
				 * visibility
				 * - 可以用来设置元素的隐藏和显示的状态
				 * - 可选值：
				 *		visible 默认值，元素默认会在页面显示
				 *		hidden 元素不会显示,但是会在页面中占据自己的位置
				 */
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		
		<div class="box"></div>
		
		<a href="#">超大链接</a>

		<span>hello</span>
	</body>
</html>
